<template>
    <div>
        <div class="login-container">
            <x-header logo="/static/images/pc_logo.png"/>
            <div class="login-wrap">
                <e-wrapper>
                    <el-form 
                      v-bind="getFormProps({labelWidth:'0px'})"
                      :rules="loginRules" 
                      ref="form"
                      class="card-box login-form"
                      >
                        <el-row>
                            <el-col :span="10">
                                <h3 class="mit_title">账号登录</h3>
                            </el-col>
                            <el-col :span="14" class="login-links">
                                <!--<router-link :to="'/signup/account'">
                                     <a class="link">免费注册»</a>
                                </router-link>
                                  -->                                
                            </el-col>
                        </el-row>
                        <el-form-item prop="username" :class="['relative']">
                            <el-input name="phone" type="text" v-model="form.username" autoComplete="on" class="full-width" placeholder="请输入账号" @change="ckeckAccount" v-focus >
                                      <template slot="prepend"><i class="iconfont">&#xe605;</i></template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input name="password" :type="pwordType" class="full-width"
                                      v-model="form.password" autoComplete="off" placeholder="密码" @change="ischange=true" :icon="eyesIcon" :on-icon-click="eyesPword">
                                      <template slot="prepend"><i class="iconfont">&#xe633;</i></template>
                            </el-input>
                        </el-form-item>
                        <el-form-item class="relative" v-if="validateCodeVisible" prop="validateCode" :rules="[{ required: true, message: '请输入图片验证码'},]">
                            <e-img-code ref="imgCode" :params="{type:1}" v-model="form.validateCode" :img-key.sync="form.randomKey"/>
                        </el-form-item>
                        
                        <el-form-item>
                            <el-button type="primary" native-type="submit" class="full-width" :loading="loading" >
                                登录
                            </el-button>
                        </el-form-item>
                        <div class="small">
                            <el-row>
                                <el-col :span="10">
                                    <el-checkbox v-model="checked">两周内自动登录</el-checkbox>
                                </el-col>
                                <el-col :span="14" class="login-links">
                                  <!--
                                    <router-link :to="'/set-password'">
                                      <a class="link">忘记密码？</a>&nbsp;
                                    </router-link>
                                    <router-link :to="'/active/account'">
                                      <a  class="link">激活帐号</a>
                                    </router-link>      
                                   -->
                                </el-col>
                            </el-row>
                            <div class="auto_login_tips">
                                <div v-show="checked">
                                    <div class="form_error"></div>
                                    <span>公共场合不建议勾选自动登录</span>
                                </div>
                            </div>
                        </div>
                    </el-form>
                </e-wrapper>
                <x-footer :type="1"></x-footer>
            </div>
        </div>

    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { VuecookieSet, VuecookieGet, VuecookieDelete } from 'utils/cookie'
  import EImgCode from '@e-ui/ImgCode'
  import validator from 'utils/validator'
  import {form} from 'utils/mixins'
  import api from 'api'
  export default {
    mixins: [form],
    components: {
      EImgCode
    },
    name: 'login',
    data () {
      const validatePass = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码不能小于6位'))
        } else {
          callback()
        }
      }
      return {
        validator,
        key: '',
        pwordType: 'password',
        eyesIcon: 'eyes-close',
        loading: false,
        checked: false,
        validateCodeVisible: false,
        ischange: false,
        form: {
          username: '',
          password: '',
          validateCode: '',
          randomKey: ''
        },
        imgSrc: '',
        loginRules: {
          username: [
            {required: true, message: '账号不能为空', trigger: 'blur'},
            {
              validator: (rule, value, callback) => {
                if (!this.check_account) {
                  callback(new Error('账号不存在'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ],
          password: [
            {required: true, trigger: 'blur', validator: validatePass}
          ]
        },
        showDialog: false
      }
    },
    computed: {
      ...mapGetters([
        'check_account'
      ])
    },
    created () {
      VuecookieDelete('htxk_token')
      VuecookieDelete('htxk_userId')
      VuecookieDelete('SESSION')
      localStorage.removeItem('menuKey')
      localStorage.removeItem('auth_orgId')
      localStorage.removeItem('role_type')
      let isAutoLogin = VuecookieGet('auto_login')
      if (isAutoLogin && VuecookieGet('htxk_token')) { // 是否自动登录
        this.$router.push({path: '/'})
        this.checked = true
      }
    },
    watch: {
      form: {
        handler: function (val, oldVal) {
          if (this.form.username === '') {
            this.form.password = ''
          }
        },
        deep: true
      }
    },
    methods: {
      submit () {
        api.login(this.form, {context: this, successMsg: '登录成功'}).then((res) => {
          let userInfo = res.data.userInfo
          this.$store.commit('LOGIN', userInfo)
          this.$store.commit('SET_TOKEN', {
            userId: userInfo.userId,
            token: userInfo.token
          })
          if (this.checked) { // 设置自动登录开关
            VuecookieSet('auto_login', true, 14)
          }
          location.href = '/'
        }).catch((res) => {
          this.$refs.imgCode && this.$refs.imgCode.refresh()
          // 登录异常
          if (res.data) {
            if (res.data.times && res.data.times >= 3) {
              this.validateCodeVisible = true
            }
          }
        })
      },
      eyesPword () {
        if (this.pwordType === 'password') {
          this.pwordType = 'text'
          this.eyesIcon = 'eyes-open'
        } else {
          this.pwordType = 'password'
          this.eyesIcon = 'eyes-close'
        }
      },
      afterQRScan () {},
      // 验证账号是否存在
      ckeckAccount () {
        if (this.form.username && (validator.pattern.mobile.test(this.form.username) || validator.pattern.email.test(this.form.username))) {
          this.$store.dispatch('check_account', {account: this.form.username})
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
    @import "src/styles/mixin.scss";

    .login-container {
        .el-icon-eyes-close:hover,.el-icon-eyes-open:hover{
          cursor: pointer;
        }
        .el-icon-eyes-close:before{
          color: #ccc;
          font-family: "iconfont" !important;
          content: '\e60b';
        }
        .el-icon-eyes-open:before{
          color: #ccc;
          font-family: "iconfont" !important;
          content: '\e914';
        }
        input:-webkit-autofill {
          background-image: none;
          box-shadow: 0 0 0px 1000px rgb(241, 251, 248) inset;
          -webkit-box-shadow: 0 0 0px 1000px rgb(241, 251, 248) inset;
        }
        input:focus{
          border: 1px solid #00bb90;
        }
        .mit_title {
            font-weight: 500;
            font-size: 18px;
            margin-bottom: 30px;
        }
        @include relative;
        height: 100vh;
        .el-checkbox {
            &__label {
                font-size: inherit;
            }
        }
        .login-wrap {
            background: url("/static/images/login_bg.jpg") center center no-repeat;
            width: 100%;
            height: 500px;
            margin: 0px auto;
            padding-top: 30px;
        }
        .login-form {
            width: 360px;
            height: 400px;
            display: block;
            background: #fff;
            -webkit-box-shadow: 0 0 10px rgba(237, 239, 241, 0.5);
            -moz-box-shadow: 0 0 10px rgba(237, 239, 241, 0.5);
            box-shadow: 0 0 10px rgba(237, 239, 241, 0.5);
            padding: 30px 30px 10px;
            float: right;
            position: relative;
        }       
        .login-links {
            text-align: right;
        }
        .auto_login_tips {
          margin-top: 5px;
        }
        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }
    }
</style>
